<template>
  <div class="functions-dict">
    <div class="questions-box flex-c-b">
      <div class="question">沈小布脱敏下?</div>
      <div class="answer" v-if="answer1">{{answer1}}</div>
      <van-button type="primary" v-if="!answer1" @click="desensitization('沈小布', 'name', 'answer1')">点击获取结果</van-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">18830593872脱敏下?</div>
      <div class="answer" v-if="answer2">{{answer2}}</div>
      <van-button type="primary" v-if="!answer2" @click="desensitization('18830593872', 'mobile', 'answer2')">点击获取结果</van-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">350624199501051314脱敏下?</div>
      <div class="answer" v-if="answer3">{{answer3}}</div>
      <van-button type="primary" v-if="!answer3" @click="desensitization('350624199501051314', 'idCard', 'answer3')">点击获取结果</van-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">宁夏回族自治区金滩村涌泉街道脱敏下?</div>
      <div class="answer" v-if="answer4">{{answer4}}</div>
      <van-button type="primary" v-if="!answer4" @click="desensitization('宁夏回族自治区金滩村涌泉街道脱敏下', 'idCard', 'answer4')">点击获取结果</van-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">1995/01/05日期格式化一下?</div>
      <div class="answer" v-if="answer5">{{answer5}}</div>
      <van-button type="primary" v-if="!answer5" @click="formatDate('1995/01/05', 'date', 'answer5')">点击获取结果</van-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">1995-01-05日期时间格式化一下?</div>
      <div class="answer" v-if="answer6">{{answer6}}</div>
      <van-button type="primary" v-if="!answer6" @click="formatDate('1995-01-05', 'datetime', 'answer6')">点击获取结果</van-button>
    </div>
    <van-button type="primary" @click="reset">重置</van-button>
  </div>
</template>

<script>
import {formatDate, desensitization} from "vue2-vant-dict"
export default {
  name: "functions-other",
  data() {
    return {
      answer1: "",
      answer2: "",
      answer3: "",
      answer4: "",
      answer5: "",
      answer6: ""
    }
  },
  methods: {
    reset() {
      this.answer1 = this.answer2 = this.answer3 = this.answer4 = this.answer5 = this.answer6 = ""
    },
    //通过值获取中文值
    desensitization(val, type, answer) {
      this[answer] = desensitization(val, {maskType: type})
    },
    formatDate(val, type, answer) {
      this[answer] = formatDate(val, type)
    }
  }
}
</script>

<style scoped>
.questions-box{
  margin-bottom: 20px;
}
</style>